<style lang="less">

.block {
  background: #fff;
}

.list_item {
  display: flex;
  align-items: center;
  border-top: 1px solid #efefef;
  padding: 35rpx 20rpx;
  .title {
    margin-right: 20rpx;
  }
  .input {
    flex: 1;
    input {
      color: #333;
    }
  }
}

.btn_box {
  margin-top: 64rpx;
  padding: 0 24rpx;
}

</style>
<template>
  <form bindsubmit="formSubmit">
    <view class="block">
      <view class="list_item">
        <view class="title">收货人姓名:</view>
        <view class="input">
          <input type="text" name="receiverName" value="{{collect_name}}" />
        </view>
      </view>
      <view class="list_item">
        <view class="title">联系电话:</view>
        <view class="input">
          <input type="text" name="mobile" value="{{collect_phone}}" />
        </view>
      </view>
      <view class="list_item">
        <view class="title">所在地区:</view>
        <view class="input">
          <view @tap="openAddressPicker">{{province ? province.name : '省'}} - {{city ? city.name : '市' }} - {{area ? area.name : '区' }}</view>
          <areaPicker @areaArray.user="areaPickerArray"></areaPicker>
        </view>
      </view>
      <view class="list_item">
        <view class="title">详细地址:</view>
        <view class="input">
          <input type="text" name="addressDetail" value="{{collect_detail}}"/>
        </view>
      </view>
    </view>
    <view class="btn_box">
      <button class="button type_main" formType="submit">完成</button>
    </view>
  </form>
</template>
<script>
import wepy from 'wepy';
import tip from '@/utils/tip';
import api from "@/api/api";
import {
  USER_SPECICAL_INFO,
  USER_ID
} from '@/utils/constant';
import AreaPicker from "../../components/common/wepy-area-picker"
export default class addressAddPage extends wepy.page {
  config = {
    navigationBarTitleText: '收货地址',
  }
  data = {
    address_ID:'',
    province: '',
    city: '',
    area: '',
    provinceCode: '',
    cityCode: '',
    areaCode: '',

    collect_name:'',
    collect_phone:'',
    collect_detail:''
  }

  components = {
    areaPicker: AreaPicker
  }

  async addAddress(address) {
    let that = this;
    let user_id = wepy.getStorageSync(USER_ID) || '';
    api.modifyOrAddAddress({
      query:{
        address:address.addressDetail,
        appUserId: user_id ,
        areaId: that.areaCode ,
        cityId: that.cityCode ,
        id: that.address_ID,
        name: address.receiverName,
        phone: address.mobile,
        provinceId: that.provinceCode
      },
      method:'POST'
    }).then(function(res){
      if(res.data.code == 0){
          wepy.navigateBack();
      }else{
        tip.error(res.data.msg)
      }
    })
    that.showLoading = false;
  }



  methods = {
    up() {
      this.$emit('upup', 'hehe'); //主动触发upup方法，'hehe'为向父组件传递的数据
    },
    formSubmit(e) {
      let receiverName = e.detail.value.receiverName;
      let mobile = e.detail.value.mobile;
      let addressDetail = e.detail.value.addressDetail;

      if (receiverName == "") {
        tip.alert("输入收件人姓名");
        return false;
      }
      if (mobile == "") {
        tip.alert("输入联系电话");
        return false;
      }
      if (this.provinceCode == "") {
        tip.alert("请选择所在地区");
        return false;
      }
      if (addressDetail == "") {
        tip.alert("输入详细地址");
        return false;
      }
        this.showLoading = true;
      this.addAddress(e.detail.value);
    },
    openAddressPicker() {
      this.$invoke('areaPicker', 'openAddressPicker');
    },
    areaPickerArray(province, city, area) {
      this.province = province;
      this.city = city;
      this.area = area;
      this.provinceCode = province.id;
      this.cityCode = city.id;
      this.areaCode = area.id;
      this.$apply();
    }
  }

  echoadress(obj){
    let self = this;
    self.collect_name = obj.name;
    self.collect_phone = obj.phone;
    self.collect_detail = obj.address;
    self.province = {
      name:obj.provinceName,
      code:obj.provinceId
    };
    self.provinceCode = obj.provinceId;
    self.city = {
      name:obj.cityName,
      code:obj.cityId
    };
    self.cityCode = obj.cityId;
    self.area = {
      name:obj.areaName,
      code:obj.areaId
    };
    self.areaCode = obj.areaId;
    self.address_ID = obj.id;
  }

  onLoad(option) {
    if (option.queryObj) {
      let fromObj = JSON.parse(option.queryObj);
      this.echoadress(fromObj.target.dataset.wpyeditaddressA)
    }
  }
}

</script>
